<template>
  <view class="wrapper">
    <div class="coupon-empty" v-if="!res">暂无优惠券</div>
    <view class="btn-box" v-else>
      <view class="long-btn">确定</view>
    </view>
    <view class="coupon-List" v-for="(item, index) in couponRes" :key="index">
      <view class="coupon-item-new">
        <view class="left">
          <view class="message">
            <view class="price" v-if="item.couponType == 'DISCOUNT'"
              >{{ item.couponDiscount }}
              <span class="small-text">折</span></view
            >
            <view class="price" v-if="item.couponType == 'PRICE'"
              >{{ item.price | unitPrice
              }}<span class="small-text">元</span></view
            >
            <view class="sub-price"
              >满{{ item.consumeThreshold | unitPrice }}可用</view
            >
          </view>
        </view>
        <view class="line"></view>
        <view class="right" v-if="item.scopeType">
          <view class="content">
            <view class="title-2"
              >使用范围：{{
                item.scopeType == "ALL" && item.storeId == "0"
                  ? "全平台"
                  : item.scopeType == "PORTION_GOODS_CATEGORY"
                  ? "仅限品类"
                  : item.storeName == "platform"
                  ? "全平台"
                  : coupon.storeName + ""
              }}使用</view
            >
            <view class="time"
              >有效期至{{ (item.endTime / 1000) | unixToDate }}</view
            >
          </view>
          <view class="relative">
            <img
              src="/static/img/select-default.png"
              alt=""
              v-if="!item.isDefault"
              class="check"
              @click="setDefault(item)"
            />
            <img
              src="/static/img/selected.png"
              alt=""
              v-else
              class="check"
              @click="setDefault(item)"
            />
          </view>
        </view>
      </view>

      <!-- <view class="coupon-item">
        <view class="top">
          <div class="price">
            <span v-if="item.couponType == 'DISCOUNT'"
              >{{ item.couponDiscount }}折</span
            >
            <span v-if="item.couponType == 'PRICE'"
              >￥{{ item.price | unitPrice }}</span
            >
          </div>
          <view class="text">
            <div class="coupon-List-title">
              <view v-if="item.scopeType">
                <span v-if="item.scopeType == 'ALL' && item.storeId == '0'"
                  >全平台</span
                >
                <span v-if="item.scopeType == 'PORTION_GOODS_CATEGORY'"
                  >仅限品类</span
                >
                <view v-else
                  >{{
                    item.storeName == "platform"
                      ? "全平台"
                      : item.storeName + "店铺"
                  }}使用</view
                >
              </view>
            </div>
            <div>满{{ item.consumeThreshold | unitPrice }}可用</div>
          </view>
          <view class="lingqu-btn" @click="getCoupon(item, index)">
            <div :class="yhqFlag[index] ? 'cur' : ''">
              {{ yhqFlag[index] ? "已领取或领完" : "立即领取" }}
            </div>
          </view>
        </view>
        <view class="line"></view>
        <view class="time"
          >{{ (item.startTime / 1000) | unixToDate }} -
          {{ (item.endTime / 1000) | unixToDate }}</view
        >
      </view> -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      yhqFlag: [], //获取优惠券判断是否点击
      couponRes: [
        {
          couponType: "DISCOUNT",
          couponDiscount: "9.99",
          scopeType: "ALL",
          storeName: "platform",
          consumeThreshold: "1000",
          startTime: "2078-07-08",
          endTime: "2078-07-08",
          isDefault: false,
        },
        {
          couponType: "PRICE",
          prices: "9.99",
          scopeType: "ALL",
          storeName: "platform",
          consumeThreshold: "1000",
          startTime: "2078-07-08",
          endTime: "2078-07-08",
          isDefault: true,
        },
        {
          couponType: "DISCOUNT",
          couponDiscount: "9.99",
          scopeType: "ALL",
          storeName: "platform",
          consumeThreshold: "1000",
          startTime: "2078-07-08",
          endTime: "2078-07-08",
          isDefault: false,
        },
        {
          couponType: "PRICE",
          prices: "9.99",
          scopeType: "ALL",
          storeName: "platform",
          consumeThreshold: "1000",
          startTime: "2078-07-08",
          endTime: "2078-07-08",
          isDefault: true,
        },
        {
          couponType: "DISCOUNT",
          couponDiscount: "9.99",
          scopeType: "ALL",
          storeName: "platform",
          consumeThreshold: "1000",
          startTime: "2078-07-08",
          endTime: "2078-07-08",
          isDefault: false,
        },
        {
          couponType: "PRICE",
          prices: "9.99",
          scopeType: "ALL",
          storeName: "platform",
          consumeThreshold: "1000",
          startTime: "2078-07-08",
          endTime: "2078-07-08",
          isDefault: true,
        },
      ],
    };
  },
  props: {
    res: {
      type: null,
      default: "",
    },
  },
  watch: {
    res: {
      handler() {
        if (this.res && this.res.length != 0) {
          Object.keys(this.res).forEach((item) => {
            let key = item.split("-")[0];
            if (key === "COUPON") {
              this.couponRes.push(this?.res[item]);
            }
          });
        }
      },
      immediate: true,
    },
  },
  methods: {
    // 提交优惠券
    getCoupon(item, index) {
      this.yhqFlag[index] = true;
      this.$emit("getCoupon", item);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../../uni.scss";
.btn-box {
  z-index: 999;
  height: 165rpx;
  padding-top: 5rpx;
  background: #fff;
  display: flex;
  align-items: center;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  border: 1rpx solid #fff;
}
.coupon-item {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.coupon-List {
  display: flex;
  flex-direction: column;
  //   height: 172rpx;
  //   margin-bottom: 28rpx;

  //   .line {
  //     height: 1px;
  //     background: #fff;
  //     margin: 0 20rpx;
  //     position: relative;

  //     &:before,
  //     &:after {
  //       content: "";
  //       display: block;
  //       width: 15rpx;
  //       height: 30rpx;
  //       background: #fff;
  //       position: absolute;
  //       top: -15rpx;
  //     }

  //     &:before {
  //       left: -50rpx;
  //     }

  //     &:after {
  //       right: -50rpx;
  //     }
  //   }

  //   .time {
  //     flex: 1;
  //     font-size: 24rpx;
  //     align-items: center;
  //     display: flex;
  //     align-items: center;
  //   }
}

.top {
  height: 140rpx;
  display: flex;

  .price {
    width: 33%;
    justify-content: center;
    color: #6772e5;
    font-size: 40rpx;
    display: flex;

    height: 100%;
    align-items: center;

    span {
      font-size: 50rpx;
    }
  }

  .text {
    width: 33%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 26rpx;
    color: 333;
    margin-left: 40rpx;

    .coupon-List-title {
      font-size: 30rpx;
      font-weight: bold;
    }
  }

  .lingqu-btn {
    display: flex;
    align-items: center;
    margin-left: 40rpx;

    text {
      width: 140rpx;
      height: 40rpx;
      text-align: center;
      line-height: 40rpx;
      color: #fff;
      background: #6772e5;
      border-radius: 5px;
      font-size: 26rpx;

      &.cur {
        background: none;
        transform: rotate(45deg) translate(10rpx, -46rpx);
      }
    }
  }
}
.coupon-item-new {
  display: flex;
  align-items: center;
  height: 172rpx;
  margin-bottom: 20rpx;
  position: relative;
  .line {
    width: 1rpx;
    height: 118rpx;
    background: #fffbfb;
    border: 1rpx dashed #009968;
    opacity: 0.3;
    position: absolute;
    left: 168rpx;
    top: 27rpx;
    z-index: 10;
  }

  .left {
    height: 100%;
    width: 172rpx;
    background-color: #fff;
    border-radius: 30rpx;
    // position: relative;

    .message {
      color: #009968;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      height: 100%;
      .small-text {
        font-size: 24rpx;
      }

      view:nth-child(1) {
        font-weight: bold;
        font-size: 60rpx;
      }

      view:nth-child(2) {
        font-size: $font-sm;
      }
      .sub-price {
        overflow: hidden;
        word-wrap: normal;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 172rpx;
      }
    }
  }

  .right {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 529rpx;
    font-size: 26rpx;
    height: 100%;
    background-color: #fff;
    overflow: hidden;
    position: relative;
    border-radius: 30rpx;
    margin-left: -6rpx;

    .content {
      color: #212121;
      margin-left: 20rpx;
      line-height: 2em;
      > view:nth-child(1) {
        color: #ff6262;
        font-size: 30rpx;
      }

      .title-2 {
        font-size: 26rpx;
        color: #212121 !important;
      }
      .time {
        color: #757575;
      }
    }
    .receive {
      color: #ffffff;
      background-color: #009968;
      border-radius: 24rpx;
      width: 104rpx;
      height: 48rpx;
      text-align: center;
      margin-right: 24rpx;
      line-height: 48rpx;
      // padding-top: 8rpx;
      // position: relative;
      // z-index: 2;
    }
    .relative {
      margin-right: 24rpx;
      .check {
        width: 36rpx;
        height: 36rpx;
      }
    }

    .jiao-1 {
      background-color: #ffc71c;
      width: 400rpx;
      transform: rotate(45deg);
      text-align: center;
      position: absolute;
      color: #ffffff;
      right: -130rpx;
      top: 0;
      .text-1 {
        margin-left: 68rpx;
        font-size: 28rpx;
      }
      .text-2 {
        margin-left: 68rpx;
        font-size: 28rpx;
      }
    }
    .no-icon {
      border-radius: 50%;
      width: 86rpx;
      height: 86rpx;
      margin-right: 48rpx;
      position: relative;
      z-index: 2;
    }
    .bg-quan {
      width: 244rpx;
      height: 244rpx;
      border: 6rpx solid $main-color;
      border-radius: 50%;
      opacity: 0.1;
      color: $main-color;
      text-align: center;
      padding-top: 30rpx;
      font-size: 130rpx;
      position: absolute;
      right: -54rpx;
      bottom: -60rpx;
    }
  }
}
</style>
